<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>* {margin: 0;padding: 0;}</style>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/mint.min.css">
</head>
<body>
<div id="app">
    <mt-button @click.native="handleToast">按钮toast</mt-button>
    <mt-button @click="handleIndicator">按钮indicator</mt-button>
    <mt-button @click="handleMessage">按钮 Message</mt-button>
    <mt-button @click="handleActionsheet">打开actionsheet</mt-button>
    <mt-actionsheet
            :actions="actions"
            v-model="sheetVisible">
    </mt-actionsheet>
</div>
</body>
<!-- 先引入 Vue -->
<!--<script src="./js/vue.min.js"></script>-->
<script src="./js/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="js/mint.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            actions: [{
                name: '拍照',
                method: this.takePhoto
            }, {
                name: '从相册中选择',
                method: this.openAlbum
            }],
            sheetVisible: false,
        },
        methods: {
            handleToast() {
                this.$toast('Hello world!')
            },
            handleIndicator() {
                this.$indicator.open("加载中...")
            }, handleMessage() {
                this.$messagebox({
                    title: '提示',
                    message: '确定执行此操作?',
                    showCancelButton: true
                });
            },
            handleActionsheet() {
                this.sheetVisible = true;
            }

        }
    })
</script>
</html>